<template>
  <div class="rowstyle">
      <!-- 基本属性 -->
      <el-divider content-position="left">基本属性</el-divider>
    
    <!-- 分栏容器编辑选项 -->
    <el-form label-width="90px" label-position="left" size="small">
      <el-form-item label="栅格间隔">
        <el-slider v-model="datas.gutter" :min="0" :max="40" :step="1"></el-slider>
      </el-form-item>
      
      <el-form-item label="水平排列">
        <el-select v-model="datas.justify" placeholder="选择水平排列方式">
          <el-option label="左对齐" value="start"></el-option>
          <el-option label="右对齐" value="end"></el-option>
          <el-option label="居中" value="center"></el-option>
          <el-option label="两端对齐" value="space-between"></el-option>
          <el-option label="环绕对齐" value="space-around"></el-option>
          <el-option label="均匀对齐" value="space-evenly"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="垂直排列">
        <el-select v-model="datas.align" placeholder="选择垂直排列方式">
          <el-option label="顶部对齐" value="top"></el-option>
          <el-option label="居中对齐" value="middle"></el-option>
          <el-option label="底部对齐" value="bottom"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="背景颜色">
        <el-color-picker v-model="datas.backgroundColor"></el-color-picker>
      </el-form-item>
      
      <el-divider content-position="left">列配置</el-divider>
      
      <div class="columns-control">
        <el-button type="primary" size="small" @click="addColumn" style="margin-bottom: 15px;">
          添加列
        </el-button>
        <el-button type="warning" size="small" @click="resetColumns" style="margin-bottom: 15px; margin-left: 10px;">
          重置列
        </el-button>
      </div>
      
      <div v-for="(column, index) in datas.columns" :key="index" class="column-item">
        <div class="column-header">
          <span>列 {{ index + 1 }}</span>
          <el-button 
            type="danger" 
            size="small" 
            icon="Delete" 
            circle
            @click="removeColumn(index)"
            :disabled="datas.columns.length <= 1"
          ></el-button>
        </div>
        
        <el-form-item label="宽度比例">
          <el-slider v-model="column.span" :min="1" :max="24" :step="1"></el-slider>
        </el-form-item>
        
        <el-form-item label="内容">
          <el-input v-model="column.content" placeholder="请输入列内容"></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'rowstyle',
  props: {
    datas: Object,
    'data-type': String,
  },
  methods: {
    addColumn() {
      // 计算当前剩余的总span
      const totalSpan = 24;
      const usedSpan = this.datas.columns.reduce((sum, column) => sum + column.span, 0);
      let newSpan = Math.min(8, totalSpan - usedSpan);
      
      // 确保至少为1
      newSpan = Math.max(1, newSpan);
      
      // 如果无法再添加列，则自动调整现有列
      if (newSpan <= 0) {
        // 将所有列的宽度平均调整
        const columnCount = this.datas.columns.length + 1;
        const perColumnSpan = Math.floor(totalSpan / columnCount);
        
        // 调整现有列的span
        this.datas.columns.forEach(column => {
          column.span = perColumnSpan;
        });
        
        newSpan = perColumnSpan;
      }
      
      this.datas.columns.push({
        span: newSpan,
        content: `列${this.datas.columns.length + 1}`
      });
    },
    removeColumn(index) {
      if (this.datas.columns.length > 1) {
        this.datas.columns.splice(index, 1);
      }
    },
    resetColumns() {
      this.datas.columns = [
        { span: 8, content: '列1' },
        { span: 8, content: '列2' },
        { span: 8, content: '列3' },
      ];
    }
  }
}
</script>

<style scoped lang="less">
.rowstyle {
  width: 100%;
  box-sizing: border-box;
  
  /* 标题 */
  h2 {
    padding: 24px 16px 24px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #f2f4f6;
    font-size: 18px;
    font-weight: 600;
    color: #323233;
  }
  
  .column-item {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    
    .column-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
</style> 